<template>
  <div>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="itemId"
          label="ItemId"
          width="120">
      </el-table-column>
      <el-table-column
          prop="productId"
          label="ProductId"
          width="120">
      </el-table-column>
      <el-table-column
          prop="listPrice"
          label="ListPrice"
          width="120">
      </el-table-column>
      <el-table-column
          prop="unitCost"
          label="UnitCost"
          width="120">
      </el-table-column>
      <el-table-column
          prop="supplierId"
          label="SupplierId"
          width="120">
      </el-table-column>
      <el-table-column
        prop="status"
        label="Status"
        width="120">
    </el-table-column>
      <el-table-column
          prop="quantity"
          label="Quantity"
          width="150">
      </el-table-column>
      <el-table-column
          prop="attribute1"
          label="Attrbute1"
          width="150">
      </el-table-column>
      <el-table-column
          prop="attribute2"
          label="Attrbute2"
          width="150">
      </el-table-column>
      <el-table-column
          prop="attribute3"
          label="Attrbute3"
          width="150">
      </el-table-column>
      <el-table-column
        prop="attribute4"
        label="Attrbute4"
        width="150">
    </el-table-column>
      <el-table-column
        prop="attribute5"
        label="Attrbute5"
        width="150">
    </el-table-column>


      <el-table-column
          fixed="right"
          label="操作"
          width="90">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">查看或修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--实现分页查询-->
    <el-pagination
        background
        layout="prev, pager, next"
        page-size="8"
        :total= counts
        @current-change="page">
    </el-pagination>
  </div>

</template>

<script>
export default {
  methods:{

    page(currentPage) {
      //alert(currentPage)
      const _this = this
      //此处需要查询item的全部信息
      axios({
        method: "GET",
        url: 'http://115.29.176.82:8081/manager/api/item',
        params: {
          size: 8,
          page: currentPage
        }
      }).then(function (resp) {
        _this.tableData = (resp.data.data.list)
      })
    },

    edit(row) {
      this.$router.push({
        path:'/itemupdate',
        query:{
          itemId:row.itemId,
          productId:row.productId,
          listPrice:row.listPrice,
          unitCost:row.unitCost,
          supplierId:row.supplierId,
          status:row.status,
          attribute1:row.attribute1,
          attribute2:row.attribute2,
          attribute3:row.attribute3,
          attribute4:row.attribute4,
          attribute5:row.attribute5,
          quantity:row.quantity
        }
      })


    },

  },

  data() {
    return {
      tableData: [],
      counts:null
    }
  },
  created() {
    const _this = this
    //此处需要查询item的全部信息
    axios({
      method:"GET",
      url:'http://115.29.176.82:8081/manager/api/item',
      params:{
        size:8,
        page:1
      }
    }).then(function (resp){
      _this.counts=resp.data.data.count
      _this.tableData = (resp.data.data.list)
    })
  }
}
</script>